//导航
<template>
  <div>
    <el-row>
      <!-- 菜单 -->
      <el-col :span="2" >
        <div>
          <!-- 显示菜单 -->
          <el-button class="ico" v-on:click="showMenu" icon="el-icon-menu" v-if="false"></el-button>
          <!-- 网站Logo -->
          <i style="font-size:40px;font-weight:bold;" class="ico el-icon-video-camera-solid"></i>
        </div>
      </el-col>

      <el-col :span="5">
        <!-- 搜索框 -->
        <span>
          <el-input placeholder="请输入搜索内容" v-model="search"></el-input>
        </span>
      </el-col>
      <el-col :span="1">
        <!-- 搜索按钮 -->
        <el-button class="ico" icon="el-icon-search" @click="pageQuery"></el-button>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="10">
        {{stringUtils.HEAD_SLOGAN}}
      </el-col>
      <el-col :span="3">
        <div v-if="loginFlag">
          <router-link to="/register">
            <el-button type="danger">注册</el-button>
          </router-link>
          <router-link to="/login">
            <el-button type="success">登陆</el-button>
          </router-link>

        </div>

        <!--显示用户-->

        <div v-if="userFlag" class="demo-basic--circle">
          <div class="block">
            <!-- 下拉菜单 -->

            <el-dropdown>
              <el-avatar shape="square" :size="size" :src="getImgsURL(userInfo.face) " ></el-avatar>
              <el-dropdown-menu slot="dropdown">
              <!--  <el-dropdown-item divided>{{userInfo.account}}</el-dropdown-item> -->
                <el-dropdown-item divided><router-link to="/admin">管理</router-link></el-dropdown-item>
                <el-dropdown-item divided>我的收藏</el-dropdown-item>
                <el-dropdown-item divided>我的频道</el-dropdown-item>
                 <el-dropdown-item divided  > <span @click="loginOut">退出</span> </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- <div class="sub-title">{{userInfo.loginName}}</div> -->
        </div>
      </el-col>

      <!-- 语言包 -->
<!--      <el-col :span="2">-->
<!--        <div>-->
<!--          <el-button class="ico" icon="el-icon-s-flag"></el-button>-->
<!--          <el-button class="ico" icon="el-icon-s-opportunity"></el-button>-->
<!--        </div>-->
<!--      </el-col>-->
    </el-row>
    <!-- 隐藏菜单 -->

<!--    <div v-if="showMenu2">-->
<!--      <el-row>-->
<!--        <el-col :span="2">-->
<!--          <el-button icon="el-icon-s-flag  ">美国</el-button>-->
<!--        </el-col>-->
<!--        <el-col :span="2">-->
<!--          <el-button type="danger">历史</el-button>-->
<!--        </el-col>-->
<!--        <el-col :span="2">-->
<!--          <el-button type="danger">最佳资源</el-button>-->
<!--        </el-col>-->
<!--        <el-col :span="2">-->
<!--          <el-button type="danger">明星</el-button>-->
<!--        </el-col>-->
<!--        <el-col :span="2">-->
<!--          <el-button type="danger">频道</el-button>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      &lt;!&ndash; 标签 &ndash;&gt;-->
<!--      <el-row>-->
<!--        <el-col :span="2">-->
<!--          <el-button type="info">长发</el-button>-->
<!--        </el-col>-->
<!--        <el-col :span="2">-->
<!--          <el-button type="info">长手</el-button>-->
<!--        </el-col>-->
<!--        <el-col :span="2">-->
<!--          <el-button type="info">长衣</el-button>-->
<!--        </el-col>-->
<!--        <el-col :span="2">-->
<!--          <el-button type="info">所有标签</el-button>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </div>-->

    <!-- 显示菜单 -->
    <el-row>

        <el-col :span="2">
          <el-button class="el-icon-s-home " @click="gohome">主页</el-button>
        </el-col>


        <el-col :span="3">
          <el-button class="el-icon-s-platform" @click="gochannel">频道中心</el-button>
        </el-col>


        <el-col :span="3">
          <el-button class="el-icon-reading" @click="gorss">我的订阅</el-button>
        </el-col>


        <el-col :span="3">
          <el-button class="el-icon-star-off" @click="gocollection">我的收藏</el-button>
        </el-col>

      <el-col :span="3">
        <el-button @click="dianbaoqun" class="el-icon-s-promotion" >交流群</el-button>
      </el-col>


        <el-col :span="3">
          <el-button @click="buy" class="el-icon-medal-1" type="success" >VIP</el-button>
        </el-col>

<!--      <el-col :span="3">-->
<!--        <el-button @click="bug" class="el-icon-suitcase-1" type="default" >BUG</el-button>-->
<!--      </el-col>-->



<!--      <router-link to="/artical">-->
<!--        <el-col :span="2">-->
<!--          <el-button class="el-icon-s-platform">我的帖子</el-button>-->
<!--        </el-col>-->
<!--      </router-link>-->
<!--      <el-col :span="2">-->
<!--        <el-button icon="el-icon-s-tools"></el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="4" :offset="8">-->
        <div>

            <el-button type="success" class="el-icon-edit-outline" @click="articalAdd">发贴</el-button>

<!--          <el-button icon="el-icon-video-play"></el-button>-->
<!--          <span>99，99，999帖子</span>-->
        </div>

    </el-row>

  </div>
</template>
<script>
import {ResultStatus} from "../constant/ResultStatus";
import {StringUtil} from "../../utils/StringUtil";

export default {
  inject: ['reload'],
  data: function() {
    return {
      search:"",//搜索字段
      //显示菜单
      showMenu2: "",
      //用户信息
      userInfo: "",
      //头像大小
      size: 70,
      //显示登陆用户
      userFlag: false,
      //显示登陆按钮
      loginFlag: true,
      baseURL: this.$axios.defaults.baseURL,
      baseIMG:this.$axios.defaults.baseIMG,
      fileServer:this.$axios.defaults.fileServer,
      stringUtils:StringUtil,

    };
  },
  //挂载 自启动方法
  mounted() {

    this.userInfo = this.$store.getters.getUserInfo;
    this.showLogin();
  },
  methods: {
    dianbaoqun(){
      this.$router.push('/qun');
      this.reload();
    },
    gohome(){
      this.$router.push('/');
      this.reload();
    },
    gochannel(){
      this.$router.push('/channel');
      this.reload();
    },
    gorss(){
      this.$router.push('/rss');
      this.reload();
    },
    gocollection(){
      this.$router.push('/collection');
      this.reload();
    },
    articalAdd(){
      if (StringUtil.checkNull(this.userInfo)) {
        this.$notify(StringUtil.warning("未登陆，请先登陆"));
        return;
      }
      let routeData = this.$router.resolve({ path: '/articalAdd'});
      window.open(routeData.href, '_blank');
      this.reload();
    },


    //切换菜单
    showMenu: function () {
      return (this.showMenu2 = !this.showMenu2);
    },
    //切换用户信息与登陆
    showLogin: function () {
      if (this.userInfo != null) {
        this.loginFlag = false;
        this.userFlag = true;
      } else {
        this.loginFlag = true;
        this.userFlag = false;
      }
    },
    /**
     * 退出
     * 清除cookie
     * 清除sesstion Strong
     */
    loginOut: async function () {
      // 为给定 ID 的 user 创建请求
      await this.$axios.get('/user/logout')
        .then(function (response) {
        })
        .catch(function (error) {
          console.log(error);
        });
      document.cookie = ResultStatus.SSO_TOKEN_KEY + "=";
      this.$store.dispatch("setUserInfo", null);
      location.reload();//重新加载当前页面

    },
    pageQuery() {
      this.$emit("func", this.search);
    },
    /**
     * 头像
     * @param data
     * @returns {string}
     */
    getImgsURL(data) {
      if (StringUtil.checkNull(data)) {
        return this.baseIMG;
      }
      return this.fileServer + StringUtil.replace(data, '\\', '/');
    },
    buy() {
      if (StringUtil.checkNull(this.userInfo)) {
        this.$notify(StringUtil.warning("未登陆，请先登陆"));
        return;
      }
      this.$router.push({path: '/admin/vip/manage'})
    },
    bug() {
      this.$confirm('提出bug,小编有时间会修复，登陆账号： ceshi   密码：ceshi123456', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '跳转中。。。'
        });

        window.open(this.$axios.defaults.bugUrl, '_blank');

      });

    }
  }
};
</script>
<style>

</style>

